<template>
    <div style="height: 100%">
        <div class="IIConent">
            <van-checkbox-group v-model="result">
                    <div class='cardSelf' v-for="item in checklist" :key='item.fcheckstandardid'>
                        <div class='cardSelftitle van-hairline--bottom'>{{item.fcheckstandardname}}</div>
                        <van-panel v-for="itemC in item.itemList" :key='itemC.fid' class='itemCell'>
                            <template #header>
                                <div class='topHeader van-hairline--bottom' >
                                    <div style="width:20%">
                                        <van-checkbox style="margin-top:2px" :name="itemC.fid" ref="checkboxes" />
                                    </div>
                                    <div class='topHeaderLeft' >
                                        <span style="line-height:22px">是否判定：</span>
                                        <van-switch  size="20px" v-model="itemC.fisdecide ==1" @change="switchChange(itemC)"/>
                                    </div>
                                </div>
                            </template>
                            <div>
                                <van-cell-group >
                                    <van-cell title="检验项目" :value="itemC.fcheckitemname" />
                                    <van-cell title="检验方法" :value="itemC.fcheckmethodname"/>
                                    <van-cell title="质量范围" :value="itemC.fexpressionname1"/>
                                    <van-cell title="能量范围" :value="itemC.fexpressionname2"/>
                                    <van-cell title="标准号" :value="itemC.fexpressionname2"/>
                                </van-cell-group>
                            </div>
                            <template #footer>
                                <van-button size="small" type="danger" @click="delBtn(itemC)">删除</van-button>
                            </template>
                        </van-panel>
                    </div>


                    <div class='cardSelf'>
                        <van-panel>
                            <template #header>
                                <div class='topHeader van-hairline--bottom' >
                                    <div style="width:20%">
                                        <van-checkbox style="margin-top:2px" name="1" ref="checkboxes" />
                                    </div>
                                    <div class='topHeaderLeft' >
                                        <span style="line-height:22px">是否判定：</span>
                                        <van-switch  size="20px" v-model="checked" />
                                    </div>
                                </div>
                            </template>
                            <div>
                                <van-cell-group>
                                    <van-cell title="检验项目" value="蛋白" />
                                    <van-cell title="检验方法" value="第一法"/>
                                    <van-cell title="价格" value="[5,12]"/>
                                </van-cell-group>
                            </div>
                            <template #footer>
                                <van-button size="small" type="danger">删除</van-button>
                            </template>
                        </van-panel>
                    </div>
            </van-checkbox-group>
      
           
        </div>
        <div class='IIFooterBtn'>
            <div class='bystandard'>
                <div class='bystandardBtn' @click="toByStandard">按标准</div>
            </div>
            <div class='byproject'>
                <div class='byprojectBtn' @click="toByProject">按项目</div>
            </div>
            <div class='submitDiv'>
                <div class='submitBtn' @click="submit">确定</div>
            </div>
            <div class='delDiv'>
                <div class='delDivBtn'>删除</div>
            </div>
        </div>
    </div>
</template>

<script>
import { 
    Field
    ,DatetimePicker
    , Popup
    ,Cell
    ,CellGroup
    ,Picker
    ,Toast
    ,RadioGroup
    , Radio 
    ,Stepper
    , Checkbox
    , CheckboxGroup
    ,IndexBar
    , IndexAnchor
    ,Switch
    ,Panel
    ,Button
} from 'vant';
import {
    searchsamplestandard
} from '@/api/InspectionItems'
export default {
    name: 'InspectionItems',
    components: {
        [Button.name]:Button,
        [Panel.name]:Panel,
        [Switch.name]:Switch,
        [IndexBar.name]:IndexBar,
        [IndexAnchor.name]:IndexAnchor,
        [Checkbox.name]:Checkbox,
        [CheckboxGroup.name]:CheckboxGroup,
        [Stepper.name]:Stepper,
        [Radio.name]:Radio,
        [RadioGroup.name]:RadioGroup,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
    },
    created() {
        this.getList()
    },
    data() {
        return {
            checked:false,
            list: ['a', 'b'],
            result: [],
            indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            fsamplereportid:'67d101e6-6bc4-4e91-aab2-d87a0d204107',
            checklist:[],
            itemlist:[]
        }
    },
    methods: {
        submit(){
            console.log(this.result)
        },
        delBtn(item){

        },
        switchChange(item){
            if(item.fisdecide == 1){
                item.fisdecide = 0
            }else if(item.fisdecide == 0){
                item.fisdecide = 1
            }
            console.log(item.fisdecide)
        },
        getList(){
            searchsamplestandard({
                fsamplereportid:this.fsamplereportid
            }).then(res=>{
                console.log(res)
                if(res.isSuccess){
                    this.checklist = res.map.checklist
                }else{
                    Toast.fail(res.errMessage)
                }
            })
        },
        toggle(index) {
            this.$refs.checkboxes[index].toggle();
        },
        toByStandard(){
            this.$router.push({path:"/byStandard"});
        },
        toByProject(){
            this.$router.push({path:"/byProject"});
        }
    }
}
</script>

<style scoped>
.itemCell{
    margin-top:20px
}
.cardSelftitle{
    text-align: left;
    line-height: 40px;
    margin-left:10px;
    font-size: 18px;
}
.IIConent{
    margin-bottom:40px
}
.IIFooterBtn{
    width:100%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    left:0;
    color: white;
    display: flex;
}
.bystandard{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 25%;
}
.bystandardBtn{
    font-size:14px;
    background: #ff976a;
    width:70%;
    height:30px;
    line-height: 30px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.byproject{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 25%;
}
.delDiv{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 25%;
}
.delDivBtn{
    font-size:14px;
    background: #ee0a24;
    width:70%;
    height:30px;
    line-height: 30px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.submitDiv{
    display: flex;
    justify-content: center;
    align-items:center;
    width: 25%; 
}
.submitBtn{
    font-size:14px;
    background: #1989fa;
    width:70%;
    height:30px;
    line-height: 30px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.byprojectBtn{
    font-size:14px;
    background: #07c160;
    width:70%;
    height:30px;
    line-height: 30px;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.topHeader{
    display:flex;
    justify-content: space-around;
    line-height:28px;
    padding:10px
}
.topHeaderLeft{
    width:80%;
    display:flex;
    align-items:center;
    justify-content: flex-end ;
}
.cardSelf{
    width: 94%;
    margin:10px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
}
.cardSelf .van-cell__title{
    text-align: left;
}
.cardSelf .van-panel__footer{
    text-align: right;
}
</style>